<template>
  <section>
    <main>
      <div class="pink">辅导记录</div>
    <div class="model">
      <div class="body">
        <div class="header"><span class="title">基本信息</span></div>
        <div class="content">
          <div class="left">
            <span>报修人</span>
            <p>{{who}}李俊义</p>
          </div>
          <div class="right">
            <span>联系方式</span>
            <p>{{phone}}1502182191</p>
          </div>
          <div class="left bigger">
            <span>故障类别</span>
            <p>{{type}}电子白版</p>
          </div>
          <div class="left">
            <span>故障描述</span>
            <p>{{main}}2号教学楼406</p>
          </div>
          <div class="right">
            <span>故障地点</span>
            <p>{{where}}打开电子白板后,无法使用</p>
          </div>
          <div class="left bigger">
            <span>维修时间</span>
            <p>{{time}}2016/04/03 13:23:24</p>
          </div>
          <div class="bottom">
            <img>
            <img>
            <img>
            <img>
          </div>
          <div class="header"><span class="title">基本信息</span></div>
          <div class="bottom">
            <el-form ref="form" :model="form" label-width="80px">
              <el-col :span="22">
                <el-form-item label="故障描述">
                  <el-input type="textarea" v-model="form.situation" autosize :autosize="{ minRows: 6}"></el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </div>
          <el-col :span="22">
            <div class="upload_box">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :multiple='true'
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :auto-upload='false'>
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog v-model="dialogVisible" :modal-append-to-body="false" size="tiny">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </div>
          </el-col>
          <el-col :span="22">
            <div class="address_list"></div>
            <div class="scent_btn">
              <button class="btn btn-danger">提交</button>
            </div>
          </el-col>
          <!-- <div class="bottom">
            <span>故障描述</span>
            <el-form-item label="通知内容">
              <el-input type="textarea" v-model="form.situation"></el-input>
            </el-form-item>
          </div> -->
        </div>
      </div>
    </div>
    </main>
  </section>
</template>

<script>
export default {
  data () {
    return {
      who: null,
      phone: null,
      type: null,
      main: null,
      where: null,
      time: null,
      form: {
        name: null,
        grade: null,
        grademsg: [{
          value: '1',
          label: '一年级'
        },
        {
          value: '2',
          label: '二年级'
        }],
        class: null,
        classmsg: [{
          value: '1',
          label: '一班'
        },
        {
          value: '1',
          label: '二班'
        }],
        course: null,
        time: null,
        situation: null
      },
      dialogImageUrl: null,
      dialogVisible: false
    }
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handlePreview (file) {
      console.log(file)
    }
  },
  mounted () {
    // let _cookie = document.cookie.split(';')
    // let _cookieArray = []
    // _cookie.forEach(v => {
    //   let _d = v.split('=')
    //   _cookieArray.push({
    //     key: _d[0],
    //     value: _d[1]
    //   })
    // })
    this.$http.post(this._httpUrl + 'faultRepair/feedback', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        let asdf = []
        for (var i = 0; i < response.data.data.rows.length; i++) {
          asdf[i] = response.data.data.rows[i].typeName
        }
        this.tnList = asdf
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
  }
}
</script>

<style>
  /*.el-textarea__inner
  {
    position: relative; left: 7%; top: -32px;
    width: 80%;
  }*/
  .scent_btn
  {
    position: relative;
    height: 80px;
    padding-bottom: 10px;
  }
  .scent_btn button
  {
    position: absolute; left: 38%; top: 40px;
  }
  .el-upload--picture-card
  {
    /*margin-left: 16%; */
    margin-top: 40px;
    width: 80px; height: 80px;
  }
  .el-upload--picture-card i
  {
    position: relative; top: -28px;
  }
</style>
<style lang="less" scoped>
@import '/static/css/material-dashboard.css';
main
{
  position: relative;
  .pink{
      width: 104px;
      height: 64px;
      position: absolute;
      left: 3%;
      top: -20px;
      background: #E12C6C;
      border-radius: 4px;
      text-align: center;
      line-height: 70px;
      color: #fff;
      z-index: 2;
    }
  .model{
    width: 98%;
    background: #FFF;
    margin-left: 1%;
    margin-top: 60px;
    border-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    overflow: hidden;
    .header{
      width: 98%; height: 22px;
      line-height: 22px !important;
      border-bottom: 1px solid #ccc;
      padding: 30px 0 10px 0;
      margin-left: 0%;
      margin-bottom: 10px;
      .title{
        color: #FB7862;
        border-bottom: 2px solid #FB7862;
        padding: 0 0 10px 0;
        margin-left: 0;
      }
    }
    .body{
      padding: 40px 0 10px 11%;
      span{
        margin-left: 4%;
        display: inline-block;
        width: 64px;
        text-align: right;
        float: left;
      }
      p{
        width: 160px;
        float: left;
        margin-left: 20%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span:first-child{
        margin-left: 0;
      }
      .content{
        width: 100%;
        div[data-v-7a69b6be]
        {
          line-height: 50px;
        }
        .left{
          width: 30%;
          display: inline-block;
          padding: 10px 0;
        }
        .bigger
        {
          width: 100%;
          p
          {
            width: 600px;
            margin-left: 6%;
          }
        }
        .right{
          width: 30%;
          display: inline-block;
          padding: 10px 0;
          margin-left: 28%;
        }
        .bottom{
          padding: 10px 0;
          .text{
            width: 68%;
          }
          img
          {
            width: 146px; height: 146px;
            background: #ccc;
          }
        }
        .text{
          border: 0;
          border-bottom: 1px solid #D7D7D7;
        }
      }
    }
  }
}
.upload_box{
  min-height: 163px;
  margin-left: 80px;
}
</style>
